<template>
  <div
    class="group min-h-[280px] lg:min-h-[240px] w-full rounded-2xl shadow-md transform transition-transform duration-300 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 hover:scale-105 active:scale-100 hover:shadow-xl hover:bg-gradient-to-r hover:from-blue-200 hover:to-purple-200 dark:hover:from-gray-700 dark:hover:to-gray-800 overflow-hidden cursor-pointer"
  >
    <!-- 封面图片 -->
    <div
      v-if="cover"
      class="rounded-t-2xl overflow-hidden shadow-sm relative w-full aspect-[16/9] lg:aspect-[2/1]"
      :title="title"
    >
      <img
        :src="cover"
        alt="封面图片"
        class="absolute inset-0 w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
        loading="lazy"
      />

      <!-- 置顶标志 -->
      <div
        v-if="isTop"
        class="absolute top-2 left-2 px-3 py-1 text-xs sm:text-sm text-white bg-red-600 rounded-full"
      >
        置顶
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="p-4 sm:p-5 lg:p-4 flex flex-col justify-between min-h-[120px] lg:min-h-[100px]">
      <!-- 上半部分：标签 + 标题 + 摘要 -->
      <div>
        <!-- 标签 -->
        <div class="flex flex-wrap gap-2 mb-2">
          <span
            v-for="tag in tags"
            class="text-[10px] sm:text-xs px-2 sm:px-3 rounded-full bg-green-100 text-green-400 dark:bg-green-900 dark:text-green-300 select-none hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-800 dark:hover:text-blue-300 transition-colors duration-200"
          >
            {{ tag }}
          </span>
        </div>

        <!-- 标题 -->
        <h2
          class="text-base sm:text-lg lg:text-base font-semibold text-gray-800 dark:text-white mb-1 lg:mb-2 line-clamp-1 lg:line-clamp-2 leading-tight"
          :title="title"
        >
          {{ title }}
        </h2>

        <!-- 摘要：固定高度容器 -->
        <div
          class="text-sm lg:text-sm text-gray-700 dark:text-gray-300 min-h-[2.5rem] lg:min-h-[2rem]"
        >
          <p class="line-clamp-2 lg:line-clamp-2 leading-relaxed" :title="summary">
            {{ summary }}
          </p>
        </div>
      </div>

      <!-- 下半部分：日期和分类 -->
      <div
        class="flex justify-between text-xs lg:text-xs text-gray-500 dark:text-gray-400 select-none mt-2 lg:mt-3 pt-2 border-t border-gray-100 dark:border-gray-700"
      >
        <span>{{ date }}</span>
        <span class="font-medium">{{ category }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  title: String,
  cover: String,
  tags: Array,
  summary: String,
  date: String,
  category: String,
  isTop: Boolean // 通过这个 prop 控制是否显示置顶标志
})
</script>
